<template>
    <div class="dept-manager">
        <div class="query-form">
            <el-form :inline="true" ref="queryForm" :model="queryForm">
                <el-form-item label="部门名称">
                    <el-input 
                        placeholder="请输入部门名称"
                        v-model="queryForm.deptName"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getDeptList">查询</el-button>
                    <el-button @click="handleReset('queryForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action">
                <el-button type="primary" @click="handleOpen" v-has="'dept-create'">创建</el-button>
            </div>
            <el-table 
                :data="deptList" 
                row-key="_id" 
                :tree-props="{ children: 'children'}" 
                stripe
            >
                <el-table-column
                    v-for="item in columns"
                    :key="item.prop"
                    v-bind="item"
                ></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleEdit(scope.row)" v-has="'dept-edit'">编辑</el-button>
                        <el-button type="danger" @click="handleDel(scope.row._id)" v-has="'dept-delete'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="action=='create'?'部门创建':'部门编辑'" v-model="showModel" @close="handleClose">
            <el-form ref="dialogForm" :model="deptForm" :rules="rules" label-width="120px">
                <el-form-item label="上级部门" prop="parentId">
                    <el-cascader
                        placeholder="请选择上级部门"
                        v-model="deptForm.parentId"
                        :options="deptList"
                        :props="{ checkStrictly: true, value:'_id', label:'deptName' }" 
                        clearable 
                        :show-all-levels="true"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="部门名称" prop="deptName">
                    <el-input 
                        placeholder="请输入部门名称" 
                        v-model="deptForm.deptName"
                    ></el-input>
                </el-form-item>
                <el-form-item label="部门负责人" prop="user">
                    <el-select placeholder="请选择部门负责人" v-model="deptForm.user" @change="handleUser">
                        <el-option 
                            v-for="item in userList" 
                            :key="item.userId" 
                            :label="item.userName"
                            :value="`${item.userId}/${item.userName}/${item.userEmail}`"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="负责人邮箱" prop="userEmail">
                    <el-input 
                        v-model="deptForm.userEmail"
                        disabled
                    ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button @click="handleSubmit" type="primary">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "dept",
    data() {
        return {
            queryForm: {
                deptName: "",
            },
            columns: [
                {
                    label: "部门名称",
                    prop: "deptName",
                },
                {
                    label: "部门负责人",
                    prop: "userName",
                },
                {
                    label: "更新时间",
                    prop: "updateTime",
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                }
            ],
            deptList: [],
            pager: {
                pageNum: 1,
                pageSize: 10,
            },
            action: 'create',
            showModel: false,
            deptForm: {
                parentId: [null]
            },
            userList: [],
            rules: {
                deptName: [
                    {
                        required: true,
                        message: "请输入部门名称",
                        trigger: "blur"
                    }
                ],
                user: [
                    {
                        required: true,
                        message: "请选择部门负责人",
                        trigger: "blur"
                    }
                ],
            },
        };
    },
    mounted() {
        this.getDeptList();
        this.getAllUserList();
    },
    methods: {
        // 获取部门列表
        async getDeptList() {
            let list = await this.$api.getDeptList(this.queryForm)
            this.deptList = list
        },
        // 获取用户列表
        async getAllUserList() {
            this.userList = await this.$api.getAllUserList()
            console.log("用户列表数据:", this.userList); // 检查字段名是否正确
        },
        // 部门负责人选择更新触发
        handleUser(val) {
            console.log("=>", val);
            const [userId, userName, userEmail] = val.split('/')
            Object.assign(this.deptForm, { userId, userName, userEmail })
        },
        // 重置表单
        handleReset(form) {
            this.$refs[form].resetFields();
        },
        // 创建部门,打开弹窗
        handleOpen() {
            this.action = 'create'
            this.showModel = true
        },
        // 部门编辑
        handleEdit(row) {
            this.action = 'edit'
            this.showModel = true
            this.$nextTick(() => {
                console.log("编辑部门数据:", row);
                Object.assign(this.deptForm, row, {
                    user: `${row.userId}/${row.userName}/${row.userEmail}`,
                })
            })
        },
        // 部门删除
        async handleDel(_id) {
            this.action = 'delete'
            let params = { ...this.deptForm, action: this.action }
            await this.$api.deptOperate({_id, action: this.action});
            this.$message.success('删除成功')
            this.getDeptList()
        },
        // 关闭弹窗
        handleClose() {
            this.showModel = false
            this.handleReset('dialogForm')
        },
        // 提交表单
        handleSubmit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    let params = { ...this.deptForm, action: this.action }
                    delete params.user;
                    await this.$api.deptOperate(params);
                    this.$message.success('操作成功')
                    this.handleClose()
                    this.getDeptList()
                }
            })
        }
    },

};
</script>

<style lang="scss">
.dept-manager {
    .query-form {
        margin-bottom: 20px;
    }
    .base-table{
        border-radius: 5px 5px 0px 0px;
        background: #ffffff;
        padding: 20px;
        border-bottom: 1px solid #e4e8e8;
    }
}
</style>